<template>
  <div class="user-view">
    <div class="container">
      <!-- 用户信息卡片 -->
      <UserProfile ref="userProfileRef" />
      
      <!-- 转换历史 -->
      <ConversionHistory ref="historyRef" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import UserProfile from '@/components/UserProfile.vue'
import ConversionHistory from '@/components/ConversionHistory.vue'

const userProfileRef = ref(null)
const historyRef = ref(null)

// 刷新所有数据
const refreshAll = () => {
  userProfileRef.value?.refresh()
  historyRef.value?.refresh()
}

// 暴露刷新方法
defineExpose({
  refreshAll
})
</script>

<style scoped>
.user-view {
  min-height: 100vh;
  background: linear-gradient(to bottom, #f9fafb 0%, #ffffff 100%);
  padding: 40px 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-view {
    padding: 20px 10px;
  }
}
</style>

